<template>
  <div class="right_main flexC">
    <div class="flex1 flexC fuwu">
      <p class="title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="" />
        <span class="colorF font_s18">购墓人数（服务对象数据）</span>
      </p>
      <div class="flexC flex1 content" style="padding:  0.5rem  0rem 0rem 1rem;">
        <p class="Medium colorF font_s22">2016～2018年购墓平均人数：19279</p>
        <!-- <div id="echarts_2"></div> -->
        <div class="flex1 content flex AlignItemsC JustifyContentC"><img src="../../assets/img/bigimg/09.png" style="width: 90%; height: 70%;" alt="" /></div>
      </div>
    </div>
    <div class="flex1 flexC fuwu">
      <p class="title">
        <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="" />
        <span class="colorF font_s18">祭扫人数（服务对象数据）</span>
      </p>
      <div class="flexC flex1 content" style="padding:  0.5rem  0rem 0rem 1rem;">
        <p class="Medium colorF font_s22">冬至祭扫人数（万人）</p>
        <!-- <div id="echarts_3"></div> -->
        <div class="flex1 content flex AlignItemsC JustifyContentC"><img src="../../assets/img/bigimg/10.png" style="width: 90%; height: 70%;" alt="" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Right',
  props: {
    msg: String
  },
  mounted () {
    this.echarts_2()
    this.echarts_3()
  },
  methods: {
    echarts_2 () {
      let myChart2 = this.$echarts.init(document.getElementById('echarts_2'))
      // 绘制图表
      myChart2.setOption({
        color: ['#9DB851'],
        xAxis: {
          axisLabel: {
            // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          data: ['2014年购墓数', '2015年购墓数', '2016年购墓数', '2017年购墓数', '2018年购墓数', '2019年购墓数']
        },
        yAxis: {
          axisLabel: {
            // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          splitLine: {
            // 横线显示
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#384a64']
            }
          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      })
    },
    echarts_3 () {
      let myChart3 = this.$echarts.init(document.getElementById('echarts_3'))
      // 绘制图表
      myChart3.setOption({
        // grid:{
        //   top:0,
        //   height:'50%',
        // },
        xAxis: {
          type: 'category',
          axisLabel: {
            // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          data: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            // 坐标轴的字体颜色
            textStyle: {
              color: '#FFFFFF'
            }
          },
          splitLine: {
            // 横线显示
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: ['#384a64']
            }
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            lineStyle: {
              // 使用深浅的间隔色
              color: ['rgba(175, 130, 31,0.8)']
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(175, 130, 31,0.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(175, 130, 31,0.2)'
                  }
                ])
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.right_main {
  position: absolute;
  right: 1rem;
  top: 25%;
  height: 73%;
  width: 25%;
  .fuwu {
    margin-bottom: 1rem;
    .title {
      line-height: 2.75rem;
      border-radius: 5px 5px 0 0;
      background: #556969;
    }
    .content {
      background: #1c1f26;
      img {
        margin-right: 0.3rem;
      }
      p {
        padding: 0.25rem;
        background: url(../../assets/img/data/21.png) no-repeat;
        background-size: 100% 100%;
      }
      #echarts_2,
      #echarts_3 {
        margin: 0 auto;
        width: 25rem;
        height: 16.75rem;
        // background: #ff00ff
      }
    }
  }
}
</style>
